import { getLogin, getLoginOut } from "@/services/Login/index";
import { history } from "umi";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import React, { useEffect, useRef, useState } from "react";
import "./login.less";

const Login: React.FC = () => {
  const [form] = Form.useForm();

  type FieldType = {
    username?: string;
    password?: string;
    code?: string;
    remember?: boolean;
    uuid: string;
  };

  let [captcha, setCaptcha] = useState<string>("");
  const uuid = useRef<string>("");
  const captchaEnabled = useRef<boolean>(false);

  const captchaImg = () => {
    getLoginOut().then((res: any) => {
      captchaEnabled.current =
        res.captchaEnabled === undefined ? true : res.captchaEnabled;
      setCaptcha("data:image/gif;base64," + res.img);
      uuid.current = res.uuid;
    });
  };
  const onFinish: FormProps<FieldType>["onFinish"] = (values: any) => {
    getLogin(values, uuid.current)
      .then((res: any) => {
        console.log(res);
        localStorage.setItem("token", res.token);
        history.push("/home");
      })
      .catch(() => {
        captchaImg();
      });
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  useEffect(() => {
    captchaImg();
  }, []);
  return (
    <div className="loginBox">
      <div className="login">
        <h1 style={{ color: "#727572", fontSize: "30px" }}>进销存系统</h1>
        <Form
          name="basic"
          initialValues={{
            remember: false,
            username: "admin",
            password: "admin123",
            code: "",
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
            style={{ marginTop: "10px" }}
          >
            <Input
              placeholder="账号"
              style={{ width: "350px", height: "45px" }}
            />
          </Form.Item>

          <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
            style={{ marginTop: "10px" }}
          >
            <Input.Password
              placeholder="密码"
              style={{ width: "350px", height: "45px", color: "#d9d9d9" }}
            />
          </Form.Item>

          <div style={{ display: "flex", alignItems: "center" }}>
            <Form.Item<FieldType> name="code" style={{ marginTop: "10px" }}>
              <Input
                style={{ width: "200px", height: "45px", color: "#d9d9d9" }}
                placeholder="验证码"
                disabled={!captchaEnabled.current}
              />
            </Form.Item>

            <img
              src={captcha}
              alt=""
              onClick={captchaImg}
              style={{ height: "45px" }}
            />
          </div>
          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            wrapperCol={{ span: 16 }}
          >
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ span: 16 }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: "350px", height: "40px" }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
